<template>
  <div v-if="modelValue" class="model">
    {{ modelValue }}
    <div class="close">
      <button class="btn" @click="close">关闭</button>
    </div>

    <h3>我是vModelVue子组件 dialog</h3>
    <div>内容：<input type="text" :value="textVal" @change="changeFun"/></div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive} from "vue"
// vue2 value vue3 modelValue

/* type Props = {
  modelValue: Boolean,
  textVal: String
}

defineProps<Props>() */

/* const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  textVal: {
    type: String,
    default: ""
  }
}) */

const props = defineProps<{
  modelValue: {
    type: Boolean,
    default: false
  },
  textVal: {
    type: String,
    default: ""
  },
  textValModifiers?: {
    isBt: {
      type: Boolean,  // 只要出现这个修饰符就是true
      default: false
    }
  }
}>()

const emit = defineEmits(["update:modelValue", "update:textVal"])

const close = () => {
  emit("update:modelValue", false)
}

const changeFun = (e:object) => {
  console.log("changeFun", e)
  let target = e.target as HTMLInputElement
  // emit("update:textVal", props?.textValModifiers?.isBt ? target.value + "变态" : target.value)
  emit("update:textVal", props?.textValModifiers?.isBt ? target.value + "变态" : target.value)
}

</script>

<style lang="less" scoped>
.model {
  width: 600px;
  margin: 10px 0;
  padding: 16px 24px;
  background-color: #fff;
  border: 4px solid #ccc;
}

.close {
  text-align: right;
}

.btn {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ccc;
}

h3 {
  line-height: 1.8;
}
</style>